<template>
	<view class="content">
		<view class="row list t_size_28">
			<view class="col-6">
				抬头类型
			</view>
			<view class="col-18 t_right">
				<radio-group name="leixing" @change="radioChange">
					<view class="row" style="justify-content: flex-end;">
						<view class="set-1">
							<radio value="1" :checked="objPage.invoiceType == 1 ? 'checked' : ''" /><text>企业单位</text>
						</view>
						<view>
							<radio value="2" :checked="objPage.invoiceType == 2 ? 'checked' : ''"/><text>个人</text>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<view class="row list t_size_28" v-if="objPage.invoiceType == 1">
			<view class="col-6">
				公司名称
			</view>
			<view class="col-18 t_right">
				<input type="text" v-model="objPage.companyName" placeholder="公司名称" />
			</view>
		</view>
		<view class="row list t_size_28" v-if="objPage.invoiceType == 1">
			<view class="col-6">
				公司税号
			</view>
			<view class="col-18 t_right">
				<input type="text" v-model="objPage.dutyParagraph" placeholder="纳税人识别号" />
			</view>
		</view>
		<view class="row list t_size_28" v-if="objPage.invoiceType == 2">
			<view class="col-6">
				抬头名称
			</view>
			<view class="col-18 t_right">
				<input type="text" v-model="objPage.companyName" placeholder="抬头名称" />
			</view>
		</view>
		<view class="row list t_size_28">
			<view class="col-6">
				发票备注
			</view>
			<view class="col-18 t_right">
				<input type="text" v-model="objPage.remarks" placeholder="该内容会打印在发票上" />
			</view>
		</view>
		<view class="row list t_size_28">
			<view class="col-6 ">
				电子邮箱
			</view>
			<view class="col-18 t_right">
				<input type="text" v-model="objPage.email" placeholder="用于向您发送电子发票" />
			</view>
		</view>
		<view class="row zonge">
			<view class="row zongetaitou t_size_28">
				<view class="col-12">
					发票总额<text>{{money}}</text>元
				</view>
				<view class="col-12 t_right">
					共<text>{{sheet}}</text>张
				</view>
			</view>
			<!-- <view class="row zongepiao">
				<view class="col-24 piaolist">
					<view class="row">
						<view class="col-6 piaoleft t_center">
							<view class="price col-24">
								10.00
							</view>
							<view class="title col-24">
								发票总额(元)
							</view>
						</view>
						<view class="col-17 off-1 piaoright">
							<view class="gongsimc">
								河南立程起才汽车租赁有限公司
							</view>
							<view class="gongsilabel">
								<text>开票方</text>
							</view>
							<view class="gongsifw">
								客运服务（发票内容）
							</view>
						</view>
					</view>
				</view>
				<view class="col-24 piaolist">
					<view class="row">
						<view class="col-6 piaoleft t_center">
							<view class="price col-24">
								10.00
							</view>
							<view class="title col-24">
								发票总额(元)
							</view>
						</view>
						<view class="col-17 off-1 piaoright">
							<view class="gongsimc">
								河南立程起才汽车租赁有限公司
							</view>
							<view class="gongsilabel">
								<text>开票方</text>
							</view>
							<view class="gongsifw">
								客运服务（发票内容）
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="tij">
			<button type="primary" @click="submit()">提交</button>
		</view>
		<view :class="index==0?'mask_active':'mask'">
			<view class="mask_content">
				<view class="cont_title row">
					<view class="col-4">
						
					</view>
					<view class="col-16 t_center t_size_32">
						电子发票
					</view>
					<view class="col-4 t_center">
						<image src="../../static/index/close_icon.png" @click="index=0" mode="heightFix"></image>
					</view>
				</view>
				<view class="cont_list row">
					<view class="col-6">
						发票类型
					</view>
					<view class="col-18 t_right">
						电子发票
					</view>
				</view>
				<view class="cont_list row">
					<view class="col-6">
						发票抬头
					</view>
					<view class="col-18 t_right">
						{{objPage.companyName}}
					</view>
				</view>
				<view class="cont_list row" v-if="objPage.invoiceType == 1">
					<view class="col-6">
						公司税号
					</view>
					<view class="col-18 t_right">
						{{objPage.dutyParagraph}}
					</view>
				</view>
				<view class="cont_list row">
					<view class="col-6">
						电子邮箱
					</view>
					<view class="col-18 t_right">
						{{objPage.email}}
					</view>
				</view>
				<view class="cont_list row">
					<view class="col-6">
						发票备注
					</view>
					<view class="col-18 t_right">
						{{objPage.remarks}}
					</view>
				</view>
				<view class="cont_toast">
					请确认电子邮箱无误，系统开具发票后会通过该邮箱发送
					给您，请您注意查收，另过路费、高速费、停车费等，请
					向收费站和停车场索取相关发票。
				</view>
				<view class="cont_btn">
					<button type="primary" @click="sureSubmit()">确认提交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				index:0,
				orderList: [],
				money: 0,
				sheet: 0,
				objPage: {
				  "companyName": "",
				  "dutyParagraph": "",
				  "email": "",
				  "invoiceType": 1,
				  "orderIdList": [],
				  "remarks": ""
				}
			}
		},
		onShow() {
			this.objPage.orderIdList = uni.getStorageSync('orderIdList') || [];
			this.load();
		},
		methods:{
			async load(){
				let res = await this.$api.request(this.$api.invoice.pricesum,{orderIdList: this.objPage.orderIdList});
				if(res){
					for(var key in res){
						this[key] = res[key];
					}
					uni.removeStorageSync('orderIdList')
				}
			},
			submit(){
				if(this.objPage.invoiceType == 1){
					if(this.objPage.companyName == ''){
						this.$public.showToast('请输入要开发票的公司名称');
						return
					}
					if(this.objPage.dutyParagraph == ''){
						this.$public.showToast('请输入要开发票的公司税号');
						return
					}
					if(this.objPage.email == ''){
						this.$public.showToast('请输入接受发票的邮箱');
						return
					}
				}else{
					if(this.objPage.companyName == ''){
						this.$public.showToast('请输入要开发票的抬头名称');
						return
					}					
				}
				this.index = 1
			},
			async sureSubmit(){
				// invoice/add
				let res = await this.$api.request(this.$api.invoice.addInvoice,this.objPage);
				if(res == undefined){
					this.$public.redTo('invoice/invoice_success');
				}
			},
			radioChange({detail}){
				this.objPage.invoiceType = detail.value;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f5f5f5;
	}
	.content{
		padding-top: 20rpx;
	}
	.list{
		width: 92%;
		padding: 0 4%;
		height: 96rpx;
		line-height: 96rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #EDEDED;
		color: #333333;
		input{
			width: 100%;
			height: 96rpx;
			line-height: 96rpx;
		}
	}
	.zonge{
		width: 92%;
		padding: 0 4%;
		margin-top: 20rpx;
		color: #333333;
		background-color: #FFFFFF;
		.zongetaitou{
			padding-top: 11rpx;
			height: 85rpx;
			line-height: 85rpx;
			text{
				color: #FF2626;
			}
		}
		.zongepiao{
			width: 100%;
			margin-bottom: 40rpx;
			margin-top: 20rpx;
			.piaolist{
				height: 180rpx;
				background-image: url(../../static/public/pbg.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-bottom: 20rpx;
				.piaoleft{
					height: 100rpx;
					padding: 40rpx 0;
					color: #6CBF30;
					.price{
						height: 60rpx;
						line-height: 60rpx;
						font-size: 40rpx;
						font-weight: 800;
					}
					.title{
						height: 40rpx;
						line-height: 40rpx;
						font-size: 24rpx;
					}
				}
				.piaoright{
					height: 120rpx;
					padding: 30rpx 0;
					.gongsimc{
						height: 30rpx;
						line-height: 30rpx;
						color: #333333;
						font-weight: 500;
						font-size: 29rpx;
					}
					.gongsilabel{
						height: 60rpx;
						line-height: 60rpx;
						text{
							color: #FFFFFF;
							background-color: #6CBF30;
							font-size: 28rpx;
							padding: 5rpx 15rpx;
							border-radius: 10rpx;
						}
					}
					.gongsifw{
						height: 30rpx;
						line-height: 30rpx;
						color: #999999;
						font-size: 28rpx;
					}
				}
			}
		}
	}
	.tij{
		width: 92%;
		padding: 0 4%;
		button{
			background-color: #6CBF30;
			height: 96rpx;
			line-height: 96rpx;
			border-radius: 48rpx;
			margin-top: 30rpx;
		}
	}
	.mask,
	.mask_active{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,0.4);
		transition-duration: 0.2s;
		/*     以下三值为默认值，稍后会详细介绍 */
		transition-property: all;
		transition-timing-function: ease;
		transition-delay: 0s;
		.mask_content{
			width: 100%;
			position: absolute;
			left: 0;
			bottom: 0;
			border-radius: 30rpx 30rpx 0 0;
			background-color: #FFFFFF;
			.cont_title{
				height: 96rpx;
				line-height: 96rpx;
				color: #333333;
				border-bottom: 1px solid #EDEDED;
				image{
					height: 36rpx;
					margin-top: 30rpx;
				}
			}
			.cont_list{
				width: 92%;
				padding: 0 4%;
				height: 64rpx;
				line-height: 64rpx;
				font-size: 28rpx;
				overflow: hidden;
				.col-6{
					color: #B3B3B3;
				}
				.col-18{
					color: #333333;
				}
			}
			.cont_toast{
				width: 88%;
				margin: 19rpx 4%;
				padding: 21rpx 2%;
				background-color: #F5F5F5;
				border-radius: 10rpx;
				font-size: 28rpx;
				color: #B3B3B3;
			}
			.cont_btn{
				width: 92%;
				padding: 40rpx 4%;
				button{
					height: 96rpx;
					line-height: 96rpx;
					border-radius: 48rpx;
					background-color: #6CBF30;
				}
			}
		}
	}
	.mask_active{
		top: 120vh;
	}
</style>
